<script setup lang="ts">
import { useCurrencyInput } from 'vue-currency-input';
import { watch } from 'vue';

const props = defineProps({ modelValue: Number });

const { inputRef, formattedValue, setValue } = useCurrencyInput({
  currency: 'CNY',
  //隐藏货币符号
  hideCurrencySymbolOnFocus: false,
  //隐藏位数分隔符
  hideGroupingSeparatorOnFocus: false,
  precision: 2
});

watch(
    () => props.modelValue,
    (value) => {
      setValue(value);
    }
);
</script>

<template>
  <el-input
      v-model="formattedValue"
      density="compact"
      variant="solo"
      ref="inputRef"
  />
</template>
